<template>
	<view class="repair-wrap">
		<view class="repair-box u-p-l-30 u-p-r-30">
<!--			<view class="header-li" style='padding: 30rpx 0 0rpx 0;'>-->
<!--				<h3>实际金额</h3>-->
<!--				<view style="color: #F5A623;font-size: 16px;margin-left: auto;">{{userObj.actual_amount?userObj.actual_amount: '&#45;&#45;'}}元</view>-->
<!--			</view>-->
<!--			<text style='display: flex;color: #999;'>提示：为保险公司实际的金额</text>-->
			<view class="header-li">
				<h3>预计赔付金额</h3>
				<view style="color: #F5A623;font-size: 16px;margin-left: auto;">{{userObj.payout_amount?userObj.payout_amount: '--'}}元</view>
			</view>
			<text style='display: flex;color: #999;'>提示：此金额为物业公司预计赔付金额</text>
			<view class="header-li" style='display: block;line-height: 60rpx;'>
				<h3>说明</h3>
				<view style="color: #999999;font-size: 16px">{{userObj.ins_shuomin?userObj.ins_shuomin: '暂无说明'}}</view>
			</view>
		    <view>
				<img v-if='userObj.picture' style="width: 100px;height: 100px;" :src="userObj.picture" alt="">
		    </view>

			<view class="u-m-t-30 repair-box" style='border-top: 4px solid #F4F4F4;border-bottom: 4px solid #F4F4F4;padding: 10rpx 0;'>
				<view class="header-li">
					<h3>理赔方式</h3>
					<picker @change="handlerCompany" :value="indexss" :range="lnsTest" range-key="lnsTest_name">
					  <view class="form-select"  style="margin-left: 38px">{{lnsTest[indexss].lnsTest_name}}</view>
					</picker>
				</view>
		    </view>
			<view class="repair-box" style='padding-bottom: 220rpx;'>
				<view class="header-li" v-if='ruleFrom.pay_type == 4' style='border-bottom: 2rpx solid #EEEEEE;line-height: 50px;'>
					<view style="width: 98px;">
						<h3>户名</h3>
					</view>
					<u-input style='padding: 8px 0 0 0;' v-model="ruleFrom.hu_name" placeholder="请输入户名" />
				</view>
				<view class="header-li" v-if='ruleFrom.pay_type == 4' style='border-bottom: 2rpx solid #EEEEEE;line-height: 50px;'>
					<view style="width: 98px;">
						<h3>开户行</h3>
					</view>
					<u-input style='padding: 8px 0 0 0;' v-model="ruleFrom.bank_cards_ka" placeholder="请输入开户行" />
				</view>
				<view class="header-li" v-if='ruleFrom.pay_type == 4' style='border-bottom: 2rpx solid #EEEEEE;line-height: 50px;'>
					<view style="width: 98px;">
						<h3>银行卡号</h3>
					</view>
					<u-input style='padding: 8px 0 0 0;' v-model="ruleFrom.bank_cards_hao" placeholder="请输入银行卡号" />
				</view>
				  <view class="header-li" v-if='ruleFrom.pay_type == 3' style='border-bottom: 2rpx solid #EEEEEE;line-height: 50px;'>
					<view style="width: 98px;">
					  <h3>支付宝号</h3>
					</view>
					<u-input style='padding: 8px 0 0 0;' v-model="ruleFrom.alipay_hao" placeholder="请输入支付宝号" />
				  </view>
				  <view  class="header-li" v-if='ruleFrom.pay_type == 2' style='line-height: 50px;'>
				  	<view style="width: 98px;">
				  	  <h3>微信收款码</h3>
				  	</view>
				  	<view style="display: flex;">
				  		<view class="guarn-box guarn-box2 u-m-t-20" v-if="fileList.length>0">
				  			<view class="guarn-box2-img" v-for="(item,index) in fileList">
				  				<image :src="item"></image>
				  				<u-icon @click="colseImg(item)" name="close" color="red" size="40" class="guarn-box2-img-close"></u-icon>
				  			</view>
				  		</view>
				  		<view class="guarn-box u-m-t-20" >
				  			<view @click="uoloadHouse" class="guarn-box-img">
				  				<image class="u-m-t-72" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/camera.svg" mode=""></image>
				  			</view>
				  		</view>
				  	</view>	
				  </view>
			</view>
		    <view style="position: fixed;bottom: 0;width: 100%;padding: 30rpx 0;background: #fff;left: 0;">
				  <button type="primary" style='background: linear-gradient(180deg, #76D904 0%, #417505 100%);' class="button_in" @click="handlerSubmitButton">同意理赔</button>
		    </view>
	</view>
	<u-modal @confirm='queryBtn' @cancel="modalCancel" confirm-text="确认"  cancel-text="返回核实" :zoom='false' v-model="modelShow" :show-title='false' :show-cancel-button='true'
	 confirm-color="#58a004">
		<view class="u-p-t-30 u-p-l-50  u-font-28" style='font-size: 18px;padding: 18px 0 10px !important;text-align: center;'>
			提示
		</view>
		<view class="u-p-t-20 u-p-b-30 u-p-l-50  u-font-28" style='text-align: center;'>
			{{modelContent}}
		</view>
	</u-modal>
	
	<view :hidden="userFeedbackHidden" class="popup_overlay">
		<view class="popup_content">
			<view class="popup_title">写下您的不同意原因</view>
			<view class="popup_textarea_item">
				<textarea class="popup_textarea" placeholder='有什么想告诉我们的...' v-model="ruleFrom.yz_remark">
				</textarea>
				<view @click="submitFeedback()">
					<button class="popup_button">提交反馈</button>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				userFeedbackHidden: true,
				modelShow: false,
				modelContent: null,
				imgFlag: true,
				ruleFrom: {
					user_id: uni.getStorageSync('rawData').userId, //用户id
					// --银行卡支付方式 目前我就清楚对公和对私这两个状态
					pay_type: 1,
					// ---银行卡号
					bank_cards_hao:null,
					//---支付宝号
					alipay_hao:null,
					bank_cards_ka: null, // 银行卡类型，
					yz_remark: null,
					hu_name:null,
				},
				date: currentDate,
				//  选择理赔类型
				indexss:0,//工作单位下标
				lnsTest:[
				  {
					lnsTest_id:1,
					lnsTest_name:'现金'
				  },
				  {
					lnsTest_id:2,
					lnsTest_name:'微信'
				  },
				  {
					lnsTest_id:3,
					lnsTest_name:'支付宝'
				  },
				  {
					lnsTest_id:4,
					lnsTest_name:'银行卡'
				  },
				],//单位
				imgFlag: false,
				fileList: [],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(options) {
		  const item = JSON.parse(decodeURIComponent(options.item));
		  this.userObj = item
		  console.log(this.userObj,"0-0-----c--d-dd详情信息")
		},
		methods: {
			hideDiv() { // 隐藏输入弹出框
				this.userFeedbackHidden = false;
			},
			// 选择图片
			uoloadHouse() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 9, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.fileList.push(res.data.data);
											// _this.ruleForm.indoor_images = res.data.data
											_this.imgFlag=false;
										})
									})
								}
			
							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.fileList.push(res.data.data);
											// _this.ruleForm.indoor_images = res.data.data
											_this.imgFlag=false;
										})
									})
								}
			
							});
						}
					},
					fail: function(res) {}
				});
			},
			//室内图
			colseImg(val){
				if(val){
					let filsArr = this.fileList;
					this.fileList = [];
					for(let i=0;i<filsArr.length;i++){
						if(filsArr[i] != val){
							this.fileList.push(filsArr[i]);
						}
					}
				}
			},
			submitFeedback() {
				this.$request.api.insuraXiouGai({
				  id :this.userObj.disId,
				  ins_state:5,
				  yz_remark:this.ruleFrom.yz_remark,
				}).then(res => {
				  if (res.data.code==0) {
					this.userFeedbackHidden = true;
					this.resetForm();
				  }
				})
			},
			handlerSubmitButton(){
				if (this.ruleFrom.pay_type == 2) {
					let reg = /^(?:1[3-9]\d{9}|[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/;
					if (reg.test(this.ruleFrom.alipay_hao) == false) {
						uni.showToast({
						  title: '支付宝账号错误',
						  duration: 2000,
						  icon: 'none'
						});
						return
					}
				}
				let res = this.$request.api.insuraXiouGai({
				  id:this.userObj.disId,
				  pay_type :this.ruleFrom.pay_type,
				  bank_cards_hao :this.ruleFrom.bank_cards_hao,
				  alipay_hao :this.ruleFrom.alipay_hao,
				  ins_state: 2,
				  bank_cards_ka: this.ruleFrom.bank_cards_ka,
				  hu_name: this.ruleFrom.hu_name,
				  or_code: this.fileList.toString(),
				}).then(res => {
				  if (res.data.code==0) {
					  this.modelShow = true;
					  this.modelContent = '理赔操作成功，请注意打款信息。'
				  }
				})
			},
			queryBtn(){
				uni.navigateTo({
				  url: '/homePage1/yeInsurance/indexlnsurance'
				})
			},
			modalCancel() {
				this.modelShow = false;
			},
			resetForm() {
				this.ruleFrom.pay_type = 1
				this.ruleFrom.bank_cards_hao = null
				this.ruleFrom.alipay_hao = null
				this.ruleFrom.bank_cards_ka = null
				this.ruleFrom.yz_remark = null
				this.ruleFrom.hu_name = null
				uni.navigateTo({
				  url: '/homePage1/yeInsurance/indexlnsurance'
				})
			},
			//拒绝
			juJueTianJiao(){
				this.modelShow = true;
				this.modelContent = '确定要拒绝该理赔信息吗？';
			},
			bindDateChange: function(s) {
				this.date = s.target.value
				this.ruleFrom.pick_time = this.date
			},
			colseImg(val){
					this.ruleFrom.goods_images = null;
					if(!this.ruleFrom.goods_images){
						this.imgFlag=true
					}
			},
			//理赔类型
		  handlerCompany(e){
			this.indexss = e.target.value
			this.ruleFrom.pay_type = this.lnsTest[this.indexss].lnsTest_id
		  },

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	.repair-wrap {
		width: 100%;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;
		border-top: 4rpx solid #f4f4f4;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.guar-back-f {
		width: 100%;
		height: 20rpx;
		background: #f4f4f4;
	}

	.guar-class-box {
		width: 196rpx;
		height: 68rpx;
		border-radius: 34rpx;
		text-align: center;
		line-height: 68rpx;
		border: 2rpx solid #ccc;

		&:nth-child(3n) {
			margin-right: 0 !important;
		}
	}

	.guar-class-box-active {
		border-color: #FEEED6;
		background: #FEEED6;
		color: #F9A832;
	}

	.guar-back-f {
		width: 100%;
		height: 20rpx;
		background: #f4f4f4;
	}

	.guar-text textarea {
		width: 345px;
		height: 120px;
		background: #F2F3F5;
		padding: 16rpx 20rpx !important;
		box-sizing: border-box;
		border-radius: 30rpx;
	}

	.guarn-box {
		width: 100%;
		height: 216rpx;
	}

	.guarn-box2 {
		display: flex;
	}

	.guarn-box2-img {
		width: 216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;

		.guarn-box2-img-close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}

	.guarn-box2 image {
		width: 216rpx;
		height: 216rpx;
	}

	.guarn-box-img {
		width: 216rpx;
		height: 216rpx;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 4rpx;
	}

	.guarn-box-img image {
		width: 76rpx;
		height: 68rpx;
	}

	.guarn-box-txt {
		width: 420rpx;
		height: 216rpx;
		color: #999;
		float: left;
	}

	.guar-txt-time {
		float: right;
		text-align: right;
		width: 420rpx;
	}

	.custom-style {
		color: #F9AF3A;
	}

	.header-li {
		display: flex;
		font-family: PingFangSC-Medium, PingFang SC;
		line-height: 84rpx;
		color: #666;
	}

	.header-name {
		width: 186rpx;
	}

	.form-select {
		width: 400rpx;
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}

	.input1 {
		width: 400rpx;
		text-align: left;
		margin-top: 8px;
		line-height: 200%;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		background: #F9A832;
		background-color: #F9A832;
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}


//  按钮样式
  .foot_item{
    margin-top: 40rpx;
    height: 120rpx;
  }
  .button1{
    width: 40%;
    line-height: 40px;
    float: left;
    margin-left: 34px;
    // height: 30%;
    border-top-left-radius: 40rpx;
    border-bottom-left-radius: 40rpx;
  }
  .button_in{
    width: 83%;
    line-height: 41px;
    float: right;
    margin-right: 30px;
    border-radius: 40rpx;
  }
  
  
  .popup_overlay {
          position: fixed;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.8);
          z-index: 1001;
      }
      .popup_content {
          position: fixed;
          top: 50%;
          left: 50%;
          width: 520upx;
          height: 550upx;
          margin-left: -270upx;
          margin-top: -270upx;
          border: 10px solid white;
          background-color: white;
          z-index: 1002;
          overflow: auto;
          border-radius: 20upx;
      }
      .popup_title {
          padding-top: 20upx;
          width: 480upx;
          text-align: center;
          font-size: 32upx;
      }
      .popup_textarea_item {
          padding-top: 5upx;
          height: 240upx;
          width: 440upx;
          background-color: #F1F1F1;
          margin-top: 30upx;
          margin-left: 20upx;
      }
      .popup_textarea {
          width: 410upx;
          font-size: 26upx;
          margin-left: 20upx;
      }
      .popup_button {
          color: white;
          background-color: #4399FC;
          border-radius: 20upx;
      }
</style>
